import React, { Component } from "react";
import logo from "./logo.svg";
import "./App.css";
import Header from "./components/Header";
import Footer from "./components/Footer";
import List from "./components/List";
export default class App extends Component {
  state = {
    todos: [
      {
        id: 0,
        name: "吃饭",
        done: true,
      },
      {
        id: 1,
        name: "睡觉",
        done: true,
      },
      {
        id: 2,
        name: "game",
        done: true,
      },
    ],
  };
  add_todos = (todoObj) => {
    let { todos } = this.state;
    // 新增一个todoObj
    let newTodos = [todoObj, ...todos];
    // react不建议用push,unshift之类改变数组的方法
    this.setState({ todos: newTodos });
  };
  update_todos = (id, done) => {
    let { todos } = this.state;
    let newTodos = todos.map((item) => {
      if (item.id === id) return { ...item, done };
      else return item;
    });
    this.setState({ todos: newTodos });
  };
  // 删除todo
  handle_delete = (id) => {
    let { todos } = this.state;
    let newTodos = todos.filter((item) => item.id !== id);
    this.setState({ todos: newTodos });
  };
  // 点击全选按钮
  handle_allCheckbox = (done) => {
    let { todos } = this.state;
    let newTodos = todos.map((item) => {
      // console.log(item);
      console.log(done);
      // 不能这些写,state里面东西不能直接修改
      // return (item.done = done);
      // 需要这么写
      return {...item,done}
    });
    console.log(newTodos);
    this.setState({ todos: newTodos });
  };
  // 清除所有已经完成的
  clear_allDone=()=>{
    let { todos } = this.state;
let newTodos=todos.filter(item=>item.done===false)
this.setState({todos:newTodos})
  }
  render() {
    let { todos } = this.state;
    return (
      <div className="App">
        <Header add_todos={this.add_todos} />
        <List
          todos={todos}
          update_todos={this.update_todos}
          handle_delete={this.handle_delete}
        ></List>
        <Footer
          todos={todos}
          handle_allCheckbox={this.handle_allCheckbox}
          clear_allDone={this.clear_allDone}
        ></Footer>
      </div>
    );
  }
}
